<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"><title>企业经济行为分析</title><!--引入echarts.js-->
    <!--<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>-->
    <#--<#include "../../include/head-file.ftl">-->
    <script type="text/javascript" src="${base}/static/plugins/jquery/3.2.1/jquery-3.2.1.min.js"></script>
    <script src="${base}/static/plugins/echarts.4.2.1/echarts.min.js"></script>
</head>
<body>
<div id="content" style="background: white;overflow-y:auto;height: calc(100vh - 20px)">
    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">一、免税商品违规售卖情况分析</div>
    <div style="text-indent: 2em;font-size:20px;line-height: 35px;margin-top: 10px;">
        据统计，近一月的免税商品违规售卖案件数量累计共{{data}}条，具体情况如下表所示。
    </div>
    <table  id='table1' style="margin-top:15px;">
        <tr>
            <th>涉案金额（万）</th>
            <th>商品名称</th>
            <th>分布区域（市）</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表1 免税商品违规售卖情况</div>

    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">二、免税商品网络贩卖渠道统计</div>
    <div style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">对免税商品售卖高发渠道进行统计分析，由下表可得，以{{data}}、{{data}}、{{data}}渠道售卖居多，其中{{data}}销售数量最多，{{data}}其次。{{data}}销售数量{{data}}，占比{{data}}，{{data}}销售数量{{data}}，占比{{data}}。</div>
    <table  id='table2' style="margin-top:15px;">
        <tr>
            <th>序号</th>
            <th>渠道</th>
            <th>销售数量（个）</th>
            <th>销量占比（%）</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表2 免税商品网络贩卖渠道统计情况</div>


    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">三、岛内走私高发地区统计分析</div>
    <div style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
        据统计，近一月岛内走私高发地区前三名分别为{{data}}、{{data}}、{{data}}，具体排名情况如下表所示。
    </div>
    <table  id='table3' style="margin-top:20px;">
        <tr>
            <th>排名</th>
            <th>走私销售数量（个）</th>
            <th>区域（市）</th>
        </tr>
    </table>
    <div style="margin-top: 10px; text-align: center; font-size: 20px;">表3 岛内走私高发地区统计情况</div>

    <div style="font-weight:bold;font-size:20px;margin-top: 20px;">四、人口流动与经济指标情况</div>
    <div style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
        根据基础资源库、一码通资源库，结合海南社会管理信息化平台网信大数据系统相关情报数据，分析岛内人口流动与经济发展走势及经济贸易安全，掌握宏观经济指标情况。如下图所示为人口流动与经济发展走势变化关系：
    </div>
    <div id="myecharts" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>

</div>
<script>
    var dataTable1 = [
        {
            money:'10',
            name:'某某商品',
            city:'海口市'
        },
        {
            money:'100',
            name:'某某商品1',
            city:'海口市'
        },
        {
            money:'4',
            name:'某某商品2',
            city:'海口市'
        }
    ];
    var dataTable2 = [
        {
            xh:'1',
            channel:'渠道1',
            count:'11',
            ratio:'23'
        },
        {
            xh:'2',
            channel:'渠道2',
            count:'11',
            ratio:'23'
        },
        {
            xh:'3',
            channel:'渠道3',
            count:'11',
            ratio:'23'
        }
    ];
    var dataTable3 = [
        {
            ranking:'1',
            count:'11',
            city:"海口"
        },
        {
            ranking:'2',
            count:'5',
            city:"文昌"
        },
        {
            ranking:'3',
            count:'4',
            city:"三亚"
        }
    ];
    var result = [
        {
            type: '人口数量',
            datas: [
                {time: '05-21', count: 95},
                {time: '05-22', count: 155},
                {time: '05-23', count: 411},
                {time: '05-24', count: 45},
            ]
        },
        {
            type: 'GDP',
            datas: [
                {time: '05-21', count: 484},
                {time: '05-22', count: 188},
                {time: '05-23', count: 99},
                {time: '05-24', count: 115},
            ]
        },
    ];
    $(document).ready(function(){
        $.each(dataTable1,function(index,item){
            var tr='<td>'+item.money+'</td>'+'<td>'+item.name+'</td>'+'<td>'+item.city+'</td>';
            $("#table1").append('<tr>'+tr+'</tr>')
        });


        $.each(dataTable2,function(index,item){
            var tr='<td>'+item.xh+'</td>'+'<td>'+item.channel+'</td>'+'<td>'+item.count+'</td>'+'<td>'+item.ratio+'</td>';
            $("#table2").append('<tr>'+tr+'</tr>')
        });

        $.each(dataTable3,function(index,item){
            var tr='<td>'+item.ranking+'</td>'+'<td>'+item.count+'</td>'+'<td>'+item.city+'</td>';
            $("#table3").append('<tr>'+tr+'</tr>')
        });

        // 四、人口流动与经济指标情况
        var myecharts = echarts.init(document.getElementById("myecharts"));
        var series = getSCategory(result).series;
        var xCategory = getSCategory(result).xCategory;
        var legend = ['人口数量', 'GDP'];
        var optionLine = getOption(xCategory, series, '人口流动与经济发展走势变化关系', legend, ['#4b91ff', '#f2637b', '#fad337']);
        myecharts.setOption(optionLine);
    });
    function getOption(xCategory, series, title, legend, color) {
        return {
            title: {
                text: title,
            },
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "line",
                },
            },
            color: color? color: ['#4b91ff'],
            legend: {
                show: legend?true: false,
                data: legend,
                icon: 'circle',
                right: '4%'
            },
            grid: {
                left: "8%",
                right: "4%",
                bottom: "5%",
                containLabel: false,
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xCategory,
            },
            yAxis: {
                type: 'value'
            },
            series: series
        }
    }
    function getSCategory(result) {
        var series = [], xCategory = [], data = []
        $.each(result,function(index,item) {
            var obj = { name: '', type: 'line', data: [] }
            var count = $.map(item.datas, function(n, i){ return n.count; })
            if(index===0) {
                xCategory = $.map(item.datas, function(n, i){ return n.time; })
            }
            obj.name = item.type;
            obj.data = count;
            series.push(obj);
        });
        return {
            series,
            xCategory
        }
    }
</script>
<style>
    table th, table td { border-bottom: 0.5px solid #999;border-right: 0.5px solid #999; }
    table { border-top: 0.5px solid #999; border-left: 0.5px solid #999;width: 800px; line-height: 40px; text-align: center; border-collapse: collapse; padding:2px;margin: 0 auto;font-size: 20px;}
</style>
</body>
</html>